<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购商城-综合网购首选-大牌优惠、售后保障</title>
    <!-- 页面标签左边的小图标 -->
    <link rel="shortcut icon" href="favicon.ico" />
    <!-- 基础样式与通用样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <!-- 页面主体样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 字体图标 -->
    <link rel="stylesheet" href="./fonts/font_3838083_58ef9lwh3ec/iconfont.css">
</head>

<body>
    <!-- 头部制作 start -->
    <!-- 顶部的快捷导航栏shortcut -->
    <section class="shortcut">
        <div class="w">
            <!-- 顶部左侧登录板块 -->
            <div class="fl">品优购欢迎您！请登录<a href="register.html">免费注册</a></div>
            <!-- 顶部右侧快捷导航栏 -->
            <div class="fr">
                <ul>
                    <li>
                        <a href="#" target="_blank">我的订单</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">我的品优购</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">品优购会员</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">企业采购</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">关注品优购</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">客户服务</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">网站导航</a>
                    </li>
                </ul>
            </div>
        </div>
    </section>
    <!-- 头部板块header -->
    <header class="head w">
        <!-- 头部左侧logo -->
        <div class="logo">
            <h1>
                <a href="index.html" title="品优购商城">品优购商城</a>
            </h1>
        </div>
        <!-- 头部中间搜索大栏 -->
        <section>
            <!-- 搜索栏之搜索板块 -->
            <div>
                <!-- 搜索栏 -->
                <input type="text" placeholder="语言开发">
                <!-- 搜索按钮 -->
                <a href="#" name="sear">搜索</a>
            </div>
            <!-- 搜索栏之热词板块 -->
            <div class="hotwords">
                <ul>
                    <li><a href="#">优惠购首发</a></li>
                    <li><a href="#">亿元优惠</a></li>
                    <li><a href="#">9.9元团购</a></li>
                    <li><a href="#">美满99减30</a></li>
                    <li><a href="#">办公用品</a></li>
                    <li><a href="#">电脑</a></li>
                    <li><a href="#">通信</a></li>
                </ul>
            </div>
        </section>
        <!-- 头部右侧购物车 -->
        <div class="shopcar">
            <!-- <p><a href="#"></a></p> -->
            <a href="#">
                <p></p>
            </a>
            <input type="button" value="我的购物车">
            <div class="shopcar_number">913</div>
        </div>
    </header>
    <!-- 导航板块nav -->
    <nav class="top_nav">
        <!-- 里面设定一个版心盒子 -->
        <section class="w">
            <!-- 导航左侧之下拉栏 -->
            <div class="dropdown">
                <!-- 下拉栏之标题，一般配合hover使用，鼠标移到这里会有下面的dd详细栏下拉出来 -->
                <div class="dt">全部商品分类</div>
                <!-- 下拉栏之内容栏，里面有详细的内容 -->
                <div class="dd">
                    <ul>
                        <li><a href="#">家用电器</a></li>
                        <!-- <li><a href="#">手机</a>、<a>数码</a>、<a>通信</a></li> -->
                        <!-- 为什么要在一个li里放多个a？因为实际中我们想要的是点击每个分类去往不同的地方，所以不可以一个链接，要精确每个链接 -->
                        <!-- 但现在练习阶段，就不搞那么麻烦了 -->
                        <li><a href="list.html">手机、数码、通信</a></li>
                        <li><a href="#">电脑、办公</a></li>
                        <li><a href="#">家居、家具、家装、厨具</a></li>
                        <li><a href="#">男装、女装、童装、内衣</a></li>
                        <li><a href="#">个户化妆、清洁用品、宠物</a></li>
                        <li><a href="#">鞋靴、箱包、珠宝、奢侈品</a></li>
                        <li><a href="#">运动户外、钟表</a></li>
                        <li><a href="#">汽车、汽车用品</a></li>
                        <li><a href="#">母婴、玩具乐器</a></li>
                        <li><a href="#">食品、酒类、生鲜、特产</a></li>
                        <li><a href="#">医药保健</a></li>
                        <li><a href="#">图书、音像、电子书</a></li>
                        <li><a href="#">彩票、旅行、充值、票务</a></li>
                        <li><a href="#">理财、众筹、白条、保险</a></li>
                    </ul>
                </div>
            </div>
            <!-- 导航右侧 -->
            <div class="navitems">
                <ul>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">美妆馆</a></li>
                    <li><a href="#">传智超市</a></li>
                    <li><a href="#">全球购</a></li>
                    <li><a href="#">闪购</a></li>
                    <li><a href="#">团购</a></li>
                    <li><a href="#">拍卖</a></li>
                    <li><a href="#">有趣</a></li>
                </ul>
            </div>
        </section>
    </nav>
    <!-- 头部制作 end -->


    <!-- 主体制作 start -->
    <!-- 页面主体main -->
    <main class="main_head w clearfix">
        <!-- 我这里没有给main-head设定高度，而下方又有别的盒子，因此需要清除浮动 -->
        <!-- 主体之焦点图 -->
        <div class="focus"><img src="./upload/focus1.png" alt=""></div>
        <!-- 主体之信息栏 strat -->
        <div class="information clearfix">
            <article class="news">
                <!-- 信息栏之信息播报 -->
                <dl>
                    <!-- 信息栏之信息播报之标题 -->
                    <dt>品优购快报<a href="#"><i>更多</i></a></dt>
                </dl>
                <dl>
                    <!-- 信息栏之信息播报之信息内容 -->
                    <dd>
                        <a href="#">
                            <h4>[特惠]</h4>备战开学季 全民半价购数码
                        </a>
                    </dd>
                    <dd>
                        <a href="#">
                            <h4>[公告]</h4>品优稳占家电网购六成份额品优稳占家电网购六成份额
                        </a>
                    </dd>
                    <dd>
                        <a href="#">
                            <h4>[特惠]</h4>百元中秋全品类礼券限量领
                        </a>
                    </dd>
                    <dd>
                        <a href="#">
                            <h4>[公告]</h4>上品优生鲜 享阳澄湖大闸蟹
                        </a>
                    </dd>
                    <dd>
                        <a href="#">
                            <h4>[福利]</h4>每日享折扣 品优品质游
                        </a>
                    </dd>
                </dl>
            </article>
            <div class="infor_service">
                <!-- 信息栏之服务栏 -->
                <ul>
                    <a href="#">
                        <li><i></i>话费</li>
                    </a>
                    <a href="#">
                        <li><i></i>话费</li>
                    </a>
                    <a href="#">
                        <li><i></i>话费</li>
                    </a>
                    <a href="#">
                        <li><i></i>话费</li>
                    </a>
                    <a href="#">
                        <li><i></i>话费</li>
                    </a>
                    <a href="#">
                        <li><i></i>话费</li>
                    </a>
                    <a href="#">
                        <li><i></i>话费</li>
                    </a>
                    <a href="#">
                        <li><i></i>话费</li>
                    </a>
                    <a href="#">
                        <li><i></i>话费</li>
                    </a>
                    <a href="#">
                        <li><i></i>话费</li>
                    </a>
                    <a href="#">
                        <li><i></i>话费</li>
                    </a>
                    <a href="#">
                        <li><i></i>话费</li>
                    </a>
                </ul>
            </div>
            <div class="infor_picture">
                <!-- 信息栏之图片 -->
                <img src="./upload/infor_picture.png" alt="">
            </div>
        </div>
        <!-- 主体之信息栏 end -->

        <!-- 主体之推荐栏 start -->
        <section class="recommend w clearfix">
            <!-- 推荐栏左侧 -->
            <div class="recommend_left ">
                <img src="./images/time.png" alt="" style="margin-bottom: 10px;">
                <h3>今日推荐</h3>
            </div>
            <!-- 推荐栏右侧 -->
            <div class="recommend_right">
                <!-- 推荐栏的小盒子们 -->
                <ul>
                    <li>
                        <!-- 推荐栏的左边文字板块 -->
                        <div class="recommed_right_l">
                            <h3>优质好货</h3><i>满300减100</i>
                            <p>满500减200</p><span>秒杀</span>
                        </div>
                        <!-- 推荐栏的右边图片板块 -->
                        <div class="recommed_right_r"><img src="./images/information.png" alt=""></div>
                    </li>
                    <li>
                        <!-- 推荐栏的左边文字板块 -->
                        <div class="recommed_right_l">
                            <h3>品牌尾货</h3><i style="background-color: #5fb200;">满300减100</i>
                            <p>团购低至9.9</p><span style="background-color: #5fb200;">团购</span>
                        </div>
                        <!-- 推荐栏的右边图片板块 -->
                        <div class="recommed_right_r"><img src="./images/information (1).png" alt=""></div>
                    </li>
                    <li>
                        <!-- 推荐栏的左边文字板块 -->
                        <div class="recommed_right_l">
                            <h3>时尚穿搭</h3><i style="background-color: #e2162f;">低至3.6折</i>
                            <p>暑期出游季</p><span style="background-color: #e2162f;">闪购</span>
                        </div>
                        <!-- 推荐栏的右边图片板块 -->
                        <div class="recommed_right_r"><img src="./images/information (2).png" alt=""></div>
                    </li>
                    <li>
                        <!-- 推荐栏的左边文字板块 -->
                        <div class="recommed_right_l">
                            <h3>0点上新</h3><i>超值大牌</i>
                            <p>低至3折</p><span>秒杀</span>
                        </div>
                        <!-- 推荐栏的右边图片板块 -->
                        <div class="recommed_right_r"><img src="./images/information (3).png" alt=""></div>
                    </li>
                </ul>
            </div>
        </section>
        <!-- 主体之推荐烂 end -->

        <!-- 主体之猜你喜欢 start -->
        <!-- 猜你喜欢之标题栏 -->
        <div class="love w clearfix">
            <h3>猜你喜欢</h3><a href="#"><i>换一批</i></a>
        </div>
        <!-- 猜你喜欢之商品栏 -->
        <section class="love_shop w clearfix">
            <ul>
                <a href="#">
                    <li>
                        <!-- 商品栏上面的样式图 -->
                        <div><img src="./upload/love_shop (1).png" alt=""></div>
                        <!-- 商品栏下面的介绍文字 -->
                        <p>韩国所望<br>
                            紧致湿润精华露400ml</p>
                        <i>￥649.00</i>
                    </li>
                </a>
                <a href="#">
                    <li>
                        <div><img src="./upload/love_shop (2).png" alt=""></div>
                        <p>阳光美包新款单肩包女<br>
                            时尚子母包四件套</p>
                        <i>￥168.00</i>
                    </li>
                </a><a href="#">
                    <li>
                        <div><img src="./upload/love_shop (3).png" alt=""></div>
                        <p>爱仕达30CM不粘锅<br>
                            NBG8330电磁炉</p>
                        <i>￥99.00</i>
                    </li>
                </a><a href="#">
                    <li>
                        <div><img src="./upload/love_shop (4).png" alt=""></div>
                        <p>捷波朗jabra<br>
                            BOOSI劲步</p>
                        <i>￥268.00</i>
                    </li>
                </a><a href="#">
                    <li>
                        <div><img src="./upload/love_shop (5).png" alt=""></div>
                        <p>欧普<br>
                            JYLZ08面板灯平板灯铝</p>
                        <i>￥138.00</i>
                    </li>
                </a><a href="#">
                    <li>
                        <div><img src="./upload/love_shop (6).png" alt=""></div>
                        <p>三星<br>
                            (GS500)移动联</p>
                        <i>￥6499.00</i>
                    </li>
                </a>
            </ul>
        </section>
        <!-- 主体之猜你喜欢 end -->

        <!-- 主体之电梯层（配合侧边的导购栏的被称为电梯栏，电梯层里面基本上装的都是商品，因此也不会指定高，因为会进行商品的添加） -->
        <section class="main_floor w clearfix">
            <!-- 一楼 -->
            <div class="floor clearfix">
                <!-- 一楼标题 -->
                <div class="floor_title">
                    <!-- 标题左侧 -->
                    <h3>家用电器</h3>
                    <!-- 标题右侧 -->
                    <ul>
                        <li><a href="#">热门</a></li>
                        <li><a href="#">大家电</a></li>
                        <li><a href="#">生活电器</a></li>
                        <li><a href="#">厨房电器</a></li>
                        <li><a href="#">个护健康</a></li>
                        <li><a href="#">应季电器</a></li>
                        <li><a href="#">空气/净水</a></li>
                        <li><a href="#">新奇特</a></li>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
                <!-- 一楼商品 -->
                <section class="floor_shop">
                    <div class="floor_shop_lt ">
                        <!-- 商品左侧 -->
                        <ul class="clearfix">
                            <!-- 商品左侧的上方列表文字 -->
                            <li><a href="#">节能补贴</a></li>
                            <li><a href="#">4K电视</a></li>
                            <li><a href="#">空气净化器</a></li>
                            <li><a href="#">IH电饭煲</a></li>
                            <li><a href="#">滚筒洗衣机</a></li>
                            <li><a href="#">电热水器</a></li>
                        </ul>
                        <!-- 商品左侧中间的文字 -->
                        <h3>索尼曲面电视</h3>
                        <p>抽奖送豪礼</p>
                        <!-- 商品左侧下方的图片 -->
                        <div class="floor_shop_lt_img">
                            <img src="./upload/floor_lt1.png" alt="">
                        </div>
                    </div>
                    <div class="floor_shop_mid">
                        <!-- 商品中间上面的文字介绍 -->
                        <h3>烧水壶智能光控泡茶壶茶具套装<br>
                            <i style="font-size: 16px;">满299.00减40.00</i>
                        </h3>
                        <!-- 商品中间的展示图片 -->
                        <section><img src="./upload/floor_mid1.png" alt=""></section>
                        <!-- 商品中间的小圆点 -->
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <section class="floor_shop_rt">
                        <!-- 商品右侧栏目 -->
                        <!-- 商品右侧的独立 小 盒子 -->
                        <a href="#">
                            <div class="floor_shop_rt_smallbox">
                                <h4>满400立减50元</h4><i>烘焙节一元抢购</i>
                                <img src="./upload/floor_rt1 (4).png" alt="">
                            </div>
                        </a>
                        <!-- 商品右侧的独立 大 盒子 -->
                        <a href="#">
                            <div class="floor_shop_rt_bigbox">
                                <h4>12.30彩电采购节</h4><i>65寸4K智能电视3799</i>
                                <img src="./upload/floor_rt1 (3).png" alt="">
                            </div>
                        </a>
                        <!-- 商品右侧的独立 小 盒子 -->
                        <a href="#">
                            <div class="floor_shop_rt_smallbox">
                                <h4>消暑神器全场领券</h4><i>1元赢空调</i>
                                <img src="./upload/floor_rt1 (5).png" alt="">
                            </div>
                        </a>
                        <!-- 商品右侧的独立 小 盒子 -->
                        <a href="#">
                            <div class="floor_shop_rt_smallbox">
                                <h4>买乐视电视享钜惠</h4><i>送60个月会员</i>
                                <img src="./upload/floor_rt1 (1).png" alt="">
                            </div>

                    </section>
                </section>
                <!-- 一楼底部 -->
                <div class="floor_bottom">
                    <img src="./upload/floor_bottom.png" alt="">
                </div>
            </div>
            <!-- 二楼 -->
            <div class="floor clearfix">
                <!-- 二楼标题 -->
                <div class="floor_title">
                    <!-- 标题左侧 -->
                    <h3>手机通讯</h3>
                    <!-- 标题右侧 -->
                    <ul>
                        <li><a href="#">热门</a></li>
                        <li><a href="#">大家电</a></li>
                        <li><a href="#">生活电器</a></li>
                        <li><a href="#">厨房电器</a></li>
                        <li><a href="#">个护健康</a></li>
                        <li><a href="#">应季电器</a></li>
                        <li><a href="#">空气/净水</a></li>
                        <li><a href="#">新奇特</a></li>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
                <!-- 二楼商品 -->
                <section class="floor_shop">
                    <div class="floor_shop_lt ">
                        <!-- 商品左侧 -->
                        <ul class="clearfix">
                            <!-- 商品左侧的上方列表文字 -->
                            <li><a href="#">节能补贴</a></li>
                            <li><a href="#">4K电视</a></li>
                            <li><a href="#">空气净化器</a></li>
                            <li><a href="#">IH电饭煲</a></li>
                            <li><a href="#">滚筒洗衣机</a></li>
                            <li><a href="#">电热水器</a></li>
                        </ul>
                        <!-- 商品左侧中间的文字 -->
                        <h3>索尼曲面电视</h3>
                        <p>抽奖送豪礼</p>
                        <!-- 商品左侧下方的图片 -->
                        <div class="floor_shop_lt_img">
                            <img src="./upload/floor_lt1.png" alt="">
                        </div>
                    </div>
                    <div class="floor_shop_mid">
                        <!-- 商品中间上面的文字介绍 -->
                        <h3>烧水壶智能光控泡茶壶茶具套装<br>
                            <i style="font-size: 16px;">满299.00减40.00</i>
                        </h3>
                        <!-- 商品中间的展示图片 -->
                        <section><img src="./upload/floor_mid1.png" alt=""></section>
                        <!-- 商品中间的小圆点 -->
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <section class="floor_shop_rt">
                        <!-- 商品右侧栏目 -->
                        <!-- 商品右侧的独立 小 盒子 -->
                        <a href="#">
                            <div class="floor_shop_rt_smallbox">
                                <h4>满400立减50元</h4><i>烘焙节一元抢购</i>
                                <img src="./upload/floor_rt1 (4).png" alt="">
                            </div>
                        </a>
                        <!-- 商品右侧的独立 大 盒子 -->
                        <a href="#">
                            <div class="floor_shop_rt_bigbox">
                                <h4>12.30彩电采购节</h4><i>65寸4K智能电视3799</i>
                                <img src="./upload/floor_rt1 (3).png" alt="">
                            </div>
                        </a>
                        <!-- 商品右侧的独立 小 盒子 -->
                        <a href="#">
                            <div class="floor_shop_rt_smallbox">
                                <h4>消暑神器全场领券</h4><i>1元赢空调</i>
                                <img src="./upload/floor_rt1 (5).png" alt="">
                            </div>
                        </a>
                        <!-- 商品右侧的独立 小 盒子 -->
                        <a href="#">
                            <div class="floor_shop_rt_smallbox">
                                <h4>买乐视电视享钜惠</h4><i>送60个月会员</i>
                                <img src="./upload/floor_rt1 (1).png" alt="">
                            </div>

                    </section>
                </section>
                <!-- 二楼底部 -->
                <div class="floor_bottom">
                    <img src="./upload/floor_bottom.png" alt="">
                </div>
            </div>
            <!-- 三楼 -->
            <div class="floor clearfix">
                <!-- 三楼标题 -->
                <div class="floor_title">
                    <!-- 标题左侧 -->
                    <h3>电脑办公</h3>
                    <!-- 标题右侧 -->
                    <ul>
                        <li><a href="#">热门</a></li>
                        <li><a href="#">大家电</a></li>
                        <li><a href="#">生活电器</a></li>
                        <li><a href="#">厨房电器</a></li>
                        <li><a href="#">个护健康</a></li>
                        <li><a href="#">应季电器</a></li>
                        <li><a href="#">空气/净水</a></li>
                        <li><a href="#">新奇特</a></li>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
                <!-- 三楼商品 -->
                <section class="floor_shop">
                    <div class="floor_shop_lt ">
                        <!-- 商品左侧 -->
                        <ul class="clearfix">
                            <!-- 商品左侧的上方列表文字 -->
                            <li><a href="#">节能补贴</a></li>
                            <li><a href="#">4K电视</a></li>
                            <li><a href="#">空气净化器</a></li>
                            <li><a href="#">IH电饭煲</a></li>
                            <li><a href="#">滚筒洗衣机</a></li>
                            <li><a href="#">电热水器</a></li>
                        </ul>
                        <!-- 商品左侧中间的文字 -->
                        <h3>索尼曲面电视</h3>
                        <p>抽奖送豪礼</p>
                        <!-- 商品左侧下方的图片 -->
                        <div class="floor_shop_lt_img">
                            <img src="./upload/floor_lt1.png" alt="">
                        </div>
                    </div>
                    <div class="floor_shop_mid">
                        <!-- 商品中间上面的文字介绍 -->
                        <h3>烧水壶智能光控泡茶壶茶具套装<br>
                            <i style="font-size: 16px;">满299.00减40.00</i>
                        </h3>
                        <!-- 商品中间的展示图片 -->
                        <section><img src="./upload/floor_mid1.png" alt=""></section>
                        <!-- 商品中间的小圆点 -->
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <section class="floor_shop_rt">
                        <!-- 商品右侧栏目 -->
                        <!-- 商品右侧的独立 小 盒子 -->
                        <a href="#">
                            <div class="floor_shop_rt_smallbox">
                                <h4>满400立减50元</h4><i>烘焙节一元抢购</i>
                                <img src="./upload/floor_rt1 (4).png" alt="">
                            </div>
                        </a>
                        <!-- 商品右侧的独立 大 盒子 -->
                        <a href="#">
                            <div class="floor_shop_rt_bigbox">
                                <h4>12.30彩电采购节</h4><i>65寸4K智能电视3799</i>
                                <img src="./upload/floor_rt1 (3).png" alt="">
                            </div>
                        </a>
                        <!-- 商品右侧的独立 小 盒子 -->
                        <a href="#">
                            <div class="floor_shop_rt_smallbox">
                                <h4>消暑神器全场领券</h4><i>1元赢空调</i>
                                <img src="./upload/floor_rt1 (5).png" alt="">
                            </div>
                        </a>
                        <!-- 商品右侧的独立 小 盒子 -->
                        <a href="#">
                            <div class="floor_shop_rt_smallbox">
                                <h4>买乐视电视享钜惠</h4><i>送60个月会员</i>
                                <img src="./upload/floor_rt1 (1).png" alt="">
                            </div>

                    </section>
                </section>
                <!-- 三楼底部 -->
                <div class="floor_bottom">
                    <img src="./upload/floor_bottom.png" alt="">
                </div>
            </div>
            <!-- 四楼 -->
            <div class="floor clearfix">
                <!-- 四楼标题 -->
                <div class="floor_title">
                    <!-- 标题左侧 -->
                    <h3>休闲娱乐</h3>
                    <!-- 标题右侧 -->
                    <ul>
                        <li><a href="#">热门</a></li>
                        <li><a href="#">大家电</a></li>
                        <li><a href="#">生活电器</a></li>
                        <li><a href="#">厨房电器</a></li>
                        <li><a href="#">个护健康</a></li>
                        <li><a href="#">应季电器</a></li>
                        <li><a href="#">空气/净水</a></li>
                        <li><a href="#">新奇特</a></li>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
                <!-- 四楼商品 -->
                <section class="floor_shop">
                    <div class="floor_shop_lt ">
                        <!-- 商品左侧 -->
                        <ul class="clearfix">
                            <!-- 商品左侧的上方列表文字 -->
                            <li><a href="#">节能补贴</a></li>
                            <li><a href="#">4K电视</a></li>
                            <li><a href="#">空气净化器</a></li>
                            <li><a href="#">IH电饭煲</a></li>
                            <li><a href="#">滚筒洗衣机</a></li>
                            <li><a href="#">电热水器</a></li>
                        </ul>
                        <!-- 商品左侧中间的文字 -->
                        <h3>索尼曲面电视</h3>
                        <p>抽奖送豪礼</p>
                        <!-- 商品左侧下方的图片 -->
                        <div class="floor_shop_lt_img">
                            <img src="./upload/floor_lt1.png" alt="">
                        </div>
                    </div>
                    <div class="floor_shop_mid">
                        <!-- 商品中间上面的文字介绍 -->
                        <h3>烧水壶智能光控泡茶壶茶具套装<br>
                            <i style="font-size: 16px;">满299.00减40.00</i>
                        </h3>
                        <!-- 商品中间的展示图片 -->
                        <section><img src="./upload/floor_mid1.png" alt=""></section>
                        <!-- 商品中间的小圆点 -->
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <section class="floor_shop_rt">
                        <!-- 商品右侧栏目 -->
                        <!-- 商品右侧的独立 小 盒子 -->
                        <a href="#">
                            <div class="floor_shop_rt_smallbox">
                                <h4>满400立减50元</h4><i>烘焙节一元抢购</i>
                                <img src="./upload/floor_rt1 (4).png" alt="">
                            </div>
                        </a>
                        <!-- 商品右侧的独立 大 盒子 -->
                        <a href="#">
                            <div class="floor_shop_rt_bigbox">
                                <h4>12.30彩电采购节</h4><i>65寸4K智能电视3799</i>
                                <img src="./upload/floor_rt1 (3).png" alt="">
                            </div>
                        </a>
                        <!-- 商品右侧的独立 小 盒子 -->
                        <a href="#">
                            <div class="floor_shop_rt_smallbox">
                                <h4>消暑神器全场领券</h4><i>1元赢空调</i>
                                <img src="./upload/floor_rt1 (5).png" alt="">
                            </div>
                        </a>
                        <!-- 商品右侧的独立 小 盒子 -->
                        <a href="#">
                            <div class="floor_shop_rt_smallbox">
                                <h4>买乐视电视享钜惠</h4><i>送60个月会员</i>
                                <img src="./upload/floor_rt1 (1).png" alt="">
                            </div>

                    </section>
                </section>
                <!-- 四楼底部 -->
                <div class="floor_bottom">
                    <img src="./upload/floor_bottom.png" alt="">
                </div>
            </div>
            <!-- 五楼 -->
            <div class="floor clearfix">
                <!-- 五楼标题 -->
                <div class="floor_title">
                    <!-- 标题左侧 -->
                    <h3>名牌衣裳</h3>
                    <!-- 标题右侧 -->
                    <ul>
                        <li><a href="#">热门</a></li>
                        <li><a href="#">大家电</a></li>
                        <li><a href="#">生活电器</a></li>
                        <li><a href="#">厨房电器</a></li>
                        <li><a href="#">个护健康</a></li>
                        <li><a href="#">应季电器</a></li>
                        <li><a href="#">空气/净水</a></li>
                        <li><a href="#">新奇特</a></li>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
                <!-- 五楼商品 -->
                <section class="floor_shop">
                    <div class="floor_shop_lt ">
                        <!-- 商品左侧 -->
                        <ul class="clearfix">
                            <!-- 商品左侧的上方列表文字 -->
                            <li><a href="#">节能补贴</a></li>
                            <li><a href="#">4K电视</a></li>
                            <li><a href="#">空气净化器</a></li>
                            <li><a href="#">IH电饭煲</a></li>
                            <li><a href="#">滚筒洗衣机</a></li>
                            <li><a href="#">电热水器</a></li>
                        </ul>
                        <!-- 商品左侧中间的文字 -->
                        <h3>索尼曲面电视</h3>
                        <p>抽奖送豪礼</p>
                        <!-- 商品左侧下方的图片 -->
                        <div class="floor_shop_lt_img">
                            <img src="./upload/floor_lt1.png" alt="">
                        </div>
                    </div>
                    <div class="floor_shop_mid">
                        <!-- 商品中间上面的文字介绍 -->
                        <h3>烧水壶智能光控泡茶壶茶具套装<br>
                            <i style="font-size: 16px;">满299.00减40.00</i>
                        </h3>
                        <!-- 商品中间的展示图片 -->
                        <section><img src="./upload/floor_mid1.png" alt=""></section>
                        <!-- 商品中间的小圆点 -->
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <section class="floor_shop_rt">
                        <!-- 商品右侧栏目 -->
                        <!-- 商品右侧的独立 小 盒子 -->
                        <a href="#">
                            <div class="floor_shop_rt_smallbox">
                                <h4>满400立减50元</h4><i>烘焙节一元抢购</i>
                                <img src="./upload/floor_rt1 (4).png" alt="">
                            </div>
                        </a>
                        <!-- 商品右侧的独立 大 盒子 -->
                        <a href="#">
                            <div class="floor_shop_rt_bigbox">
                                <h4>12.30彩电采购节</h4><i>65寸4K智能电视3799</i>
                                <img src="./upload/floor_rt1 (3).png" alt="">
                            </div>
                        </a>
                        <!-- 商品右侧的独立 小 盒子 -->
                        <a href="#">
                            <div class="floor_shop_rt_smallbox">
                                <h4>消暑神器全场领券</h4><i>1元赢空调</i>
                                <img src="./upload/floor_rt1 (5).png" alt="">
                            </div>
                        </a>
                        <!-- 商品右侧的独立 小 盒子 -->
                        <a href="#">
                            <div class="floor_shop_rt_smallbox">
                                <h4>买乐视电视享钜惠</h4><i>送60个月会员</i>
                                <img src="./upload/floor_rt1 (1).png" alt="">
                            </div>

                    </section>
                </section>
                <!-- 五楼底部 -->
                <div class="floor_bottom">
                    <img src="./upload/floor_bottom.png" alt="">
                </div>
            </div>
        </section>
        <!-- 主体之电梯层 end -->
    </main>
    <!-- 主体制作end -->

    <!-- 底部制作 start -->
    <!-- 底部板块footer -->
    <footer class="foot">
        <section class="w">
            <!-- 服务板块mod_service -->
            <div class="mod_service">
                <ul>
                    <!-- 正品保障 -->
                    <li>
                        <!-- 服务板块左边的文字图标 -->
                        <div class="mod_service_fonts">&#xe98b;</div>
                        <!-- 服务板块右边的上下行文字 -->
                        <div class="mod_service_content">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <!-- 急速物流 -->
                    <li>
                        <!-- 服务板块左边的文字图标 -->
                        <div class="mod_service_fonts">&#xe999;</div>
                        <!-- 服务板块右边的上下行文字 -->
                        <div class="mod_service_content">
                            <h4>急速物流</h4>
                            <p>急速物流，急速送达</p>
                        </div>
                    </li>
                    <!-- 无忧售后 -->
                    <li>
                        <!-- 服务板块左边的文字图标 -->
                        <div class="mod_service_fonts">&#xe678;</div>
                        <!-- 服务板块右边的上下行文字 -->
                        <div class="mod_service_content">
                            <h4>无忧售后</h4>
                            <p>7天无理由退换货</p>
                        </div>
                    </li>
                    <!-- 特色服务 -->
                    <li>
                        <!-- 服务板块左边的文字图标 -->
                        <div class="mod_service_fonts">&#xe99b;</div>
                        <!-- 服务板块右边的上下行文字 -->
                        <div class="mod_service_content">
                            <h4>特色服务</h4>
                            <p>私人定制家电套餐</p>
                        </div>
                    </li>
                    <!-- 帮助中心 -->
                    <li>
                        <!-- 服务板块左边的文字图标 -->
                        <div class="mod_service_fonts">&#xe677;</div>
                        <!-- 服务板块右边的上下行文字 -->
                        <div class="mod_service_content">
                            <h4>帮助中心</h4>
                            <p>您的购物指南</p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 帮助板块 mod_help -->
            <div class="mod_help">
                <!-- 购物指南 -->
                <dl>
                    <dt>购物指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <!-- 配送方式 -->
                <dl>
                    <dt>配送方式</dt>
                    <dd><a href="#">上门自提</a></dd>
                    <dd><a href="#">211限时达</a></dd>
                    <dd><a href="#">配送服务查询</a></dd>
                    <dd><a href="#">配送费收取标准</a></dd>
                    <dd><a href="#">海外配送</a></dd>
                </dl>
                <!-- 支付方式 -->
                <dl>
                    <dt>支付方式</dt>
                    <dd><a href="#">货到付款</a></dd>
                    <dd><a href="#">在线支付</a></dd>
                    <dd><a href="#">分期付款</a></dd>
                    <dd><a href="#">邮局汇款</a></dd>
                    <dd><a href="#">公司转账</a></dd>
                </dl>
                <!-- 售后服务 -->
                <dl>
                    <dt>售后服务</dt>
                    <dd><a href="#">售后政策</a></dd>
                    <dd><a href="#">价格保护</a></dd>
                    <dd><a href="#">退款说明</a></dd>
                    <dd><a href="#">返修/退换货</a></dd>
                    <dd><a href="#">取消订单</a></dd>
                </dl>
                <!-- 特色服务 -->
                <dl>
                    <dt>特色服务</dt>
                    <dd><a href="#">夺宝岛</a></dd>
                    <dd><a href="#">DIY装机</a></dd>
                    <dd><a href="#">延保服务</a></dd>
                    <dd><a href="#">品优购E卡</a></dd>
                    <dd><a href="#">品优购通信</a></dd>
                </dl>
                <!-- 关于我们 -->
                <dl>
                    <dt>关于我们</dt>
                    <dd><img src="./images/wx.jpg" alt=""></dd>
                    <dd>欢迎咨询客服</dd>
                </dl>
            </div>
            <!-- 版权板块 mod_copyright -->
            <div class="mod_copyright">
                <div class="w">
                    <!-- 底部导航 -->
                    <div class="bottom_nav">
                        <ul>
                            <li><a href="#">关于我们</a></li>
                            <li><a href="#">联系我们</a></li>
                            <li><a href="#">联系客服</a></li>
                            <li><a href="#">商家入驻</a></li>
                            <li><a href="#">营销中心</a></li>
                            <li><a href="#">手机品优购</a></li>
                            <li><a href="#">友情链接</a></li>
                            <li><a href="#">销售联盟</a></li>
                            <li><a href="#">品优购社区</a></li>
                            <li><a href="#">品优购公益</a></li>
                            <li><a href="#">English Site</a></li>
                            <li><a href="#">Contact U</a></li>
                        </ul>
                    </div>
                    <!-- 地址与版权 -->
                    <div class="copy">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱:
                        zhanghj+itcast.cn<br>
                        京ICP备08001421号京公网安备110108007702</div>
                </div>
            </div>
        </section>
    </footer>
    <!-- 底部制作 end -->
</body>

</html>